<template>
  <div>
     <div class="box-dt">
        <div class="dt-title">
          <div class="dt-icon">
            <img src="@/assets/news_icon.png" alt />
          </div>
            <div>新闻早班车</div>
              <div class="more">
                <a class="morelink" href="" >更多</a>
                <van-icon class="moreicon" name="arrow" color="#bfbfbf" style="position: relative; top: 2.5px;"/>
            </div>
        </div>
        <div class="box-gb">
          <div class="gb-img">
            <img src="@/assets/news.png" alt />
          </div>
        </div>
      </div>
    <div class="box-dt">
        <div class="dt-title">
          <div class="dt-icon">
            <img src="@/assets/gb_icon.png" alt />
          </div>
            <div>在线广播</div>
        </div>
        <div class="box-gb">
          <div class="gb-img">
            <img src="@/assets/media_gb.jpg" alt />
          </div>
        </div>
      </div>
       <div class="box-dt">
        <div class="dt-title">
          <div class="dt-icon">
            <img src="@/assets/st_lm_icon.png" alt />
          </div>
          <div>广播栏目</div>
        </div>
      <div class="itemList" align="center">
        <van-row type="flex" justify="space-around">
          <van-col class="item" span="8" v-for="(item,key) in list" :key="key" >
          <van-image class="itemImg" :src="item.image" width="100%"/>
          <div class="title">{{item.recommendName}}</div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'media',
  data(){
    return {
      list: [
        {
          image: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201021/10/1603248536597/1603248536597.jpg',
          recommendName: '帮帮团'
        },
         {
          image: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201021/10/1603248570229/1603248570229.jpg',
          recommendName: '摇摆早高峰'
        },
         {
          image: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201021/10/1603248580730/1603248580730.jpg',
          recommendName: '绿色直播间'
        },
         {
          image: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201021/10/1603248591536/1603248591536.jpg',
          recommendName: '村村响'
        },
         {
          image: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201021/10/1603248601023/1603248601023.jpg',
          recommendName: '大圣说'
        },
         {
          image: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201021/10/1603248607761/1603248607761.jpg',
          recommendName: '开心辣疙瘩'
        }
      ]
    }
  }
}
</script>

<style scoped>
  .dt-icon {
  padding-left: 10px;
  margin-right: .5rem;
  }
  .dt-icon img {
    width: 20px;
    height: 20px;
  }
  .more {
    padding-left: 190px;
  }
  .morelink {
    color: #bfbfbf;
    font-size: 14px;
    
  }
  .dt-title {
    display: flex;
    padding: 0.24rem;
    align-items: center;
    background: #f5f5f5;
  }
  .gb-img {
    padding: 10px 10px 10px 10px;
  }
  .gb-img img{
    width: 100%;
  }
  .item {
    padding: 20px 5px 20px 5px;
  }
</style>